<mat-accordion class="demo-tree-container">

  <mat-expansion-panel>
    <mat-expansion-panel-header>Flattened tree</mat-expansion-panel-header>
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
        <button mat-icon-button disabled></button>
        {{node.filename}} : {{node.type}}
      </mat-tree-node>
      <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
        <button mat-icon-button matTreeNodeToggle
                [attr.aria-label]="'toggle ' + node.filename">
          <mat-icon class="mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.filename}} : {{node.type}}
      </mat-tree-node>
    </mat-tree>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>Nested tree</mat-expansion-panel-header>
    <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
      <mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
        <li class="mat-tree-node">
          <button mat-icon-button disabled></button>
          {{node.filename}}:  {{node.type}}
        </li>
      </mat-nested-tree-node>
      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
        <li>
          <div class="mat-tree-node">
            <button mat-icon-button matTreeNodeToggle
                    [attr.aria-label]="'toggle ' + node.filename">
              <mat-icon class="mat-icon-rtl-mirror">
                {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
              </mat-icon>
            </button>
            {{node.filename}}
          </div>
          <ul [class.demo-tree-invisible]="!nestedTreeControl.isExpanded(node)">
            <ng-container matTreeNodeOutlet></ng-container>
          </ul>
        </li>
      </mat-nested-tree-node>
    </mat-tree>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>CDK Flattened tree</mat-expansion-panel-header>
    <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
      <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="demo-tree-node">
        <button mat-icon-button disabled></button>
        {{node.filename}}:  {{node.type}}
      </cdk-tree-node>
      <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                     class="demo-tree-node">
        <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
                cdkTreeNodeToggle>
          <mat-icon class="mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.filename}}:  {{node.type}}
      </cdk-tree-node>
    </cdk-tree>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>CDK Nested tree</mat-expansion-panel-header>
    <cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
      <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="demo-tree-node">
        <button mat-icon-button disabled></button>
        {{node.filename}}:  {{node.type}}
      </cdk-nested-tree-node>
      <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="demo-tree-node">
        <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
                cdkTreeNodeToggle>
          <mat-icon class="mat-icon-rtl-mirror">
            {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.filename}}:  {{node.type}}
        <div [class.demo-tree-invisible]="!nestedTreeControl.isExpanded(node)"
             class="demo-tree-nested-node">
          <ng-container cdkTreeNodeOutlet></ng-container>
        </div>
      </cdk-nested-tree-node>
    </cdk-tree>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>Todo list Flattened tree</mat-expansion-panel-header>
    <checklist-tree-demo></checklist-tree-demo>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>Todo list Nested tree</mat-expansion-panel-header>
    <checklist-nested-tree-demo></checklist-nested-tree-demo>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>Dynamic flat tree</mat-expansion-panel-header>
    <dynamic-tree-demo></dynamic-tree-demo>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>Loadmore flat tree</mat-expansion-panel-header>
    <loadmore-tree-demo></loadmore-tree-demo>
  </mat-expansion-panel>


</mat-accordion>
